<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 购物车</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="css/default.min.css" />

		<!-- JS -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.color-2.1.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<!-- 导航条开始 -->
		<div id="head-div">

		</div>
		<script>
			$("#head-div").load("head.html");
		</script>
		<!-- //导航条结束 -->

		<!-- 商品分类&搜索表单部分 -->
		<section class="container">

			<!-- 商品分类部分 -->
			<div id="main-parent" >

			</div>
			<script>
				$("#main-parent").load("parent.html");
			</script>
			<!-- //商品分类部分结束 -->

			<!-- 搜索表单部分 -->
			<div id="serach-div" >

			</div>
			<script>
				$("#serach-div").load("serach.html");
			</script>
			<!-- //搜索表单部分结束 -->
		</section>
		<!-- //商品分类&搜索表单部分 -->

		<!-- 页面主体部分 -->
		<div class="container mt-2">
			<div class="h3 border-bottom">购物车明细</div>
			<!-- 空购物车为空时显示以下注释内容 -->
			<!-- <div class="row">
				<div class="col-md-3 offset-md-2">
					<div class="text-center">
						<img src="img/car_no_goods.jpg" class="img-fluid" />
					</div>
				</div>
				<div class="col-md-5">
					<div class="text-center cart-empty">
						<p class="text-muted">亲，您的购物车空空如也，快去抢购心仪的商品吧~~~</p>
						<a href="index.html" class="btn btn-info">去快乐购</a>
					</div>
				</div>
			</div> -->

			<!-- 购物车列表部分（购物车有数据时显示） -->
			<form id="form-cart" action="my/order-confirm.html">
				<table class="table table-sm table-striped">
					<thead class="thead-dark">
						<tr>
							<th>
								<input data-toggle="check-all" type="checkbox" class="checkbox-inline" id="quanbu"/>
							</th>
							<th>商品名称</th>
							<th>单价(元)</th>
							<th>数量</th>
							<th>小计金额(元)</th>
							<th>编辑</th>
						</tr>
					</thead>
					<tbody id="tbody">

					</tbody>
					<tfoot>
						<tr>
							<td colspan="4" align="right">
								<div class="cart-foot-sum text-muted">
									<small>总计金额：</small>
									</h3>
								</div>
							</td>
							<td colspan="2" align="left">
								<div class="cart-foot-sum text-danger">
									<small>￥</small>
									<span id="sum1"></span>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="4" align="right">
								<div class="cart-foot-sum text-muted">
									<small>应付款：</small>
								</div>
							</td>
							<td colspan="2" align="left">
								<div class="cart-foot-sum text-danger">
									<small>￥</small>
									<span id="sum2" ></span>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="6" align="right">
								<!--已登录时可以提交订单，显示该按钮-->
								<button class="btn btn-lg btn-success"  id="goshopping">
									<span class="glyphicon-shopping-cart"></span>
									<span>提交订单</span>
								</button>
							</td>
						</tr>
					</tfoot>
				</table>
			</form>
			<!-- //购物车列表部分结束 -->
		</div>
		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<div id="footer-div">

		</div>
		<script>
			$("#footer-div").load("footer.html");
		</script>
		<!-- //页面脚部部分结束 -->
	</body>

</html>
